<template lang='pug'>
  Modal.lzw-modal-style-2.charging-scheme-detail(v-model="show" title="收费方案" fullscreen)
    Spin(v-if="spinLoading" fix size="large")
    Form(ref="detailInfo" :model="detailInfo" :rules="ruleValidate" :label-width="120")
      Row(type="flex" justify="start" :gutter="16")
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }")
          FormItem(label="收费方案类型：" prop="chargingType"  :label-width="130")
            Select.input-has-border.c-333(v-model="category"  placeholder="请选择收费类型" disabled)
              Option(v-for="(item, index) in chargingTypeArr" :value="item.key" :key="index") {{ item.value }}
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }")
          FormItem(label="收费方案名称：" prop="name"  :label-width="130")
            Input.input-has-border(v-model="detailInfo.name" :readonly="disabled")
        Col(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }")
          FormItem.ivu-form-item-required(label="是否跟随保险收费：" :label-width="150")
            i-switch(v-model="detailInfo.followInsure" :disabled="disabled")
              span(slot="open") 是
              span(slot="close") 否
    Divider.mt-0
    .card.mb-15
      //- Checkbox 按方式收费
      .font-weight(v-if="detailInfo.type === 2 || detailInfo.type === 3") 年度总包收费
      .font-weight(v-if="detailInfo.type === 4 || detailInfo.type === 5") 按岗位工资收费
      .font-weight(v-if="detailInfo.type === 8 || detailInfo.type === 9") 按人员数量收费
      .font-weight(v-if="detailInfo.type === 16 || detailInfo.type === 17") 按人头收费
      .font-weight(v-if="detailInfo.type === 32 || detailInfo.type === 33") 组合项目收费
      .font-weight(v-if="detailInfo.type === 128 || detailInfo.type === 129") 按缴费基数收费
      .pos-r.input-h24.mt-20(v-if="detailInfo.type === 2 || detailInfo.type === 3")
        .d-f-c.pb-20(v-for="(item, index) in detailInfo.details" :key="index")
          Input.input-has-border(v-model="item.amount" type="number" style="width:100px" :readonly="disabled")
          span  元/年，费用开始月：
          Select.input-has-border(v-model="item.startMonth"  placeholder="请选择"  style="width:100px" :disabled="disabled")
            Option(v-for="(item, idx) in monthArr" :value="item.key" :key="idx") {{ item.value }}
          .early-collection.ml-15 是否提前收取：
            i-switch(v-model="item.isAhead" :disabled="disabled")
              span(slot="open") 是
              span(slot="close") 否
      .pos-r.mt-20(v-if="detailInfo.type === 4 || detailInfo.type === 5")
        .has-line
          span 温馨提示：服务费=岗位工资-社保-公积金-实发工资-个税-手续费-其他扣除-商保
      .pos-r.mt-20(v-if="detailInfo.type === 8 || detailInfo.type === 9")
        .has-line
          span 温馨提示：范围与范围之间，需有连贯性
          Button.ml-20(type="info" size="small" @click="addScopeFn" :disabled="disabled") 添加范围
        .scope
          .li.input-h24.mt-10(v-for="(item, index) in detailInfo.details" :key="index")
            Input.input-has-border(v-model="item.rangeMin" type="number" style="width:100px" :readonly="disabled")
            |  -- 
            Input.input-has-border(v-model="item.rangeMax" type="number" style="width:100px" :readonly="disabled")
            |  人，
            Input.input-has-border(v-model="item.amount" type="number" style="width:100px" :readonly="disabled")
            |  元/人/月
            //- span.u-d-info.ml-20(v-show="index === detailInfo.details.length-1" @click="delScopeFn") 删除
      .pos-r.mt-20(v-if="detailInfo.type === 16 || detailInfo.type === 17")
        template(v-for="(item,index) in detailInfo.details")
          Divider.mt-5.mb-5
          //- Checkbox.d-f-c.mt-10(:label="item.category")
          .d-f-c.ml-10
            .capitation-li
              Checkbox(v-model="item.enable" :disabled="disabled") 启用
              span {{item.categoryName}}：
              Input.input-has-border(v-model="item.amount" type="number" style="width:100px;" :readonly="disabled")
              span  元/人/月，
            .capitation-li
              span 收费规则：
              RadioGroup(v-model="item.charge")
                Radio(:label="1" border :disabled="disabled") 当月新增当月收费
                Radio(:label="5" border :disabled="disabled") 当月新增次月收费
                Radio(:label="2" border :disabled="disabled")
                  span 预收：
                  Input.input-has-border(v-model="item.advanceMonths" type="number" style="width:100px" :readonly="disabled")
                  span 个月（
                  .early-collection 是否提前收取：
                    i-switch(v-model="item.isAhead" :disabled="disabled")
                      span(slot="open") 是
                      span(slot="close") 否
                  span ）
        Divider.mt-5.mb-0
        Checkbox.d-f-c.mt-10(v-model="detailInfo.discardLast" :disabled="disabled")
          .ml-10 收头不收尾
      .pos-r.mt-20(v-if="detailInfo.type === 32 || detailInfo.type === 33")
        Table(border :columns="thead" :data="detailInfo.details")
          //- template(slot-scope="{ row, index }" slot="enable")
          //-   Checkbox(v-model="row.enable" @on-change="enableChange(row,index)")
          .input-h24(slot-scope="{ row, index }" slot="price")
            Input.input-has-border(v-model="row.amount" type="number" @on-change="tablePriceChange(row, index)" :readonly="disabled")
          .input-h24(slot-scope="{ row, index }" slot="rule")
            RadioGroup(v-model="row.charge" @on-change="tableRadioChange(row,index)")
              Radio(:label="1" border :disabled="disabled") 当月新增当月收费
              Radio(:label="5" border :disabled="disabled") 当月新增次月收费
              //- Radio(:label="2" border)
              //-   span 预收：
              //-   Input.input-has-border(v-model="row.advanceMonths" style="width:100px" @on-change="tableMonthChange(row,index)")
              //-   span 个月（
              //-   .early-collection 是否提前收取：
              //-     i-switch(v-model="row.isAhead" @on-change="tableSwitchChange(row,index)")
              //-       span(slot="open") 是
              //-       span(slot="close") 否
              //-   span ）
        Divider.mt-5.mb-0
        Checkbox.d-f-c.mt-10(v-model="detailInfo.discardLast" :disabled="disabled")
          .ml-10 收头不收尾
      .pos-r.mt-20(v-if="detailInfo.type === 128 || detailInfo.type === 129")
        .input-h24.mt-15(v-for="(item, index) in detailInfo.details" :key="index")
          //- span {{taxTextArr[index]}}：
          span {{item.category === 1 ? '社保' : '公积金'}}：
          Input.input-has-border(v-model="item.rate" type="number" style="width:100px" :readonly="disabled")
          span %
    .card.mb-15
      Checkbox(v-model="fuwufeiModel2" @on-change="fuwufeiModel2Change" :disabled="disabled") 按金额比例收费
      .container.ml-30(v-if="fuwufeiModel2")
        .input-h24.mt-15(v-for="(item, index) in detailInfo.rateDetails" :key="index")
          span {{taxTextArr[index]}}：
          Input.input-has-border(v-model="item.rate" type="number" style="width:100px" :readonly="disabled")
          span %
        RadioGroup(v-model="calOrder" @on-change="calOrderChange").mt-20
          Radio(label="1" :disabled="disabled").mr-30 先计算税费
          Radio(label="2" :disabled="disabled") 先计算服务费
    .text-center(slot="footer")
      Button(@click="cancel") 关闭
      Button(type="info" @click="submitBtn('detailInfo')" :disabled="disabled") 保存
</template>

<script>
import InsureProjectApi from '@/api/InsureProject.api.js'
export default {
  name:'',
  props:{
    category: Number,
    chargingTypeArr: Array,
    detailInfo: Object
  },
  data () {
    return {
      show: false,
      disabled: true,
      spinLoading: true,
      biliArr: [1,3,5,9,17,33,129],
      fuwufeiModel2: false,
      calOrder: '2',
      taxTextArr:['社保', '公积金', '商保', '薪资', '税费'],
      monthArr: [
        {key: 1, value: '1月'},
        {key: 2, value: '2月'},
        {key: 3, value: '3月'},
        {key: 4, value: '4月'},
        {key: 5, value: '5月'},
        {key: 6, value: '6月'},
        {key: 7, value: '7月'},
        {key: 8, value: '8月'},
        {key: 9, value: '9月'},
        {key: 10, value: '10月'},
        {key: 11, value: '11月'},
        {key: 12, value: '12月'},
      ],
      thead: [
        // {type: 'selection', width: 60, fixed: 'left'},
        // {title: '是否启用', slot: 'enable', width: 100},
        {title: '组合方式',
          // key: 'name', 
          width: 200,
          render: (h, params) => {
            let row = params.row
            let name = this.setName(row.category)
            return h('div', name)
          }
        },
        {title: '服务费金额(元/人/月)', slot: 'price', width: 120},
        {title: '收费规则', slot: 'rule', minWidth: 800}
      ],
      ruleValidate: {
        name: [
          { required: true, message: '请输入方案名称', trigger: 'blur' }
        ]
      }
    };
  },

  components: {},

  computed: {
  },

  beforeMount() {},

  mounted() {
  },

  methods: {
    fuwufeiModel2Change (val) {
      console.log(val)
      if (val) {
        this.detailInfo.type++
      } else {
        this.detailInfo.type--
      }
      console.log(this.detailInfo.type)
    },
    calOrderChange (val) {
      if (val === '1') {
        this.detailInfo.sfFirst = false
      } else {
        this.detailInfo.sfFirst = true
      }
    },
    openModal () {
      this.show = true
    },
    cancel () {
      this.spinLoading = true
      this.show = false
      // this.$emit('on-cancel')
    },
    // 服务费添加范围
    addScopeFn () {
      let strat = parseInt(this.detailInfo.details[this.detailInfo.details.length -1].rangeMax) + 1
      this.detailInfo.details.push({rangeMin: strat, rangeMax: null, amount: 0})
    },
    delScopeFn () {
      if (this.detailInfo.details.length === 1) {
        return false
      } else {
        this.detailInfo.details.pop()
      }
    },
    enableChange (row,index) {
      this.detailInfo.details[index].enable = row.enable
    },
    tablePriceChange (row,index) {
      console.log(row,index)
      this.detailInfo.details[index].amount = row.amount
    },
    tableRadioChange (row, index) {
      this.detailInfo.details[index].charge = row.charge
    },
    tableMonthChange (row, index) {
      this.detailInfo.details[index].advanceMonths = row.advanceMonths
    },
    tableSwitchChange (row,index) {
      this.detailInfo.details[index].isAhead = row.isAhead
    },
    setName (val) {
      let name = ''
      switch (val) {
        case 17:
          name = '社保'
          break;
        case 18:
          name = '公积金'
          break;
        case 20:
          name = '商保'
          break;
        case 24:
          name = '薪资'
          break;
        case 19:
          name = '社保+公积金'
          break;
        case 21:
          name = '社保+商保'
          break;
        case 25:
          name = '社保+薪资'
          break;
        case 22:
          name = '公积金+商保'
          break;
        case 26:
          name = '公积金+薪资'
          break;
        case 28:
          name = '商保+薪资'
          break;
        case 23:
          name = '社保+公积金+商保'
          break;
        case 27:
          name = '社保+公积金+薪资'
          break;
        case 29:
          name = '社保+商保+薪资'
          break;
        case 30:
          name = '公积金+商保+薪资'
          break;
        case 31:
          name = '社保+公积金+商保+薪资'
          break;
      }
      return name
    },
    submitBtn (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          if (this.detailInfo.type === 0 || this.detailInfo.type === 1) {
            this.biliSubmit()
          }
          if (this.detailInfo.type === 2 || this.detailInfo.type === 3) {
            this.postYearlySFProject()
          }
          if (this.detailInfo.type === 4 || this.detailInfo.type === 5) {
            this.postBySalarySFProject()
          }
          if (this.detailInfo.type === 8 || this.detailInfo.type === 9) {
            this.postByCountSFProject()
          }
          if (this.detailInfo.type === 16 || this.detailInfo.type === 17) {
            this.postByTypeSFProject()
          }
          if (this.detailInfo.type === 32 || this.detailInfo.type === 33) {
            this.postByCombiningTypeSFProject()
          }
        } else {

        }
      })
      
    },
    // 仅有金额比例
    biliSubmit () {
      InsureProjectApi.PostYearlySFProject(this.detailInfo).then(res => {
        if (res.data.success) {
          this.$Message.success(res.data.message)
          this.$emit('get-list')
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },
    postYearlySFProject () {
      InsureProjectApi.PostYearlySFProject(this.detailInfo).then(res => {
        if (res.data.success) {
          this.$Message.success(res.data.message)
          this.$emit('get-list')
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },
    postBySalarySFProject () {
      InsureProjectApi.PostBySalarySFProject(this.detailInfo).then(res => {
        if (res.data.success) {
          this.$Message.success(res.data.message)
          this.$emit('get-list')
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },
    postByCountSFProject () {
      InsureProjectApi.PostByCountSFProject(this.detailInfo).then(res => {
        if (res.data.success) {
          this.$Message.success(res.data.message)
          this.$emit('get-list')
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },
    postByTypeSFProject () {
      InsureProjectApi.PostByTypeSFProject(this.detailInfo).then(res => {
        if (res.data.success) {
          this.$Message.success(res.data.message)
          this.$emit('get-list')
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },
    postByCombiningTypeSFProject () {
      InsureProjectApi.PostByCombiningTypeSFProject(this.detailInfo).then(res => {
        if (res.data.success) {
          this.$Message.success(res.data.message)
          this.$emit('get-list')
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    }

  },

  watch: {
    'detailInfo.id': {
      handler(newVal, oldVal) {
        this.spinLoading = false
        // if (this.type_1.includes(newVal)) {
        // }
      },
      immediate: true,
      deep: true
    },
    'detailInfo.type': {
      handler(newVal, oldVal) {
        if (this.biliArr.includes(newVal)) {
          this.fuwufeiModel2 = true
        } else {
          this.fuwufeiModel2 = false
        }
      },
      immediate: true,
      deep: true
    },
    'detailInfo.sfFirst': {
      handler(newVal, oldVal) {
        if (newVal) {
          this.calOrder = '2'
        } else {
          this.calOrder = '1'
        }
      },
      immediate: true,
      deep: true
    }
  }

}

</script>
<style lang="less">
  .c-333{
     .ivu-select-selection {
      color: #333 !important;
    }
  }
</style>


<style lang='less' scoped>
  .card{
    display: block;
    border: 1px solid #dcdee2;
    padding: 16px;
    border-radius: 4px;
  }
  .d-f-c{
    display: flex;
    align-items: center;
  }
  .pos-r{
    position: relative;
  }
  .has-line{
    position: relative;
    &:before{
      content: "";
      display: block;
      width: 100%;
      height: 1px;
      background: #eee;
      position: absolute;
      top: 12px;
      left: 0;
    }
    span{
      display: inline-block;
      background: #fff;
      padding: 0 5px 0 18px;
      position: relative;
      margin-left: 30px;
      font-size: 14px;
      color: red;
    }
    button{
      position: relative;
    }
  }
  .early-collection{
    display: inline-block;
  }
  .ratio-item{
    margin-top: 10px;
    span{
      display: inline-block;
      width: 60px;
    }
  }
</style>